<template>
  <div class="topBox">
    <div class="title">
      <div class="leftTitle">质检详情</div>
      <div class="rightDot">
        <span class="dotOne"></span>
        <span class="text">客户侧</span>
        <span class="dotTwo"></span>
        <span class="text">座席侧</span>
      </div>
    </div>
    <!-- <audio :src="props.audioSrc" ref="audio"></audio> -->
    <div class="line" ref="line"></div>
    <div class="top" ref="top">
      <canvas ref="topCanvas"></canvas>
    </div>
    <!-- <div class="bottom" ref="bottom">
      <canvas ref="bottomCanvas" style="transform:rotate(180deg)"></canvas>
    </div> -->
    <audio-play
      :audioSrc="props.audioSrc"
      :time="props.time"
      @play="play"
      @end="end"
      @forward="forward"
      @back="back"
      @setRate="setRate"
      @playDuration="playDuration"
      @resetAudioData="resetAudioData"
    ></audio-play>
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs, watch, inject, nextTick, toRef } from 'vue'
import AudioPlay from './audioPlay.vue'
// import dayjs from 'dayjs'
// import duration from "dayjs/plugin/duration";
// day.extend(duration);
const props = defineProps({
  audioArray:Array,
  audioSrc:String,
  time: Number
})



let flag = inject('showFlag')
const isShowTab = ref(false)
watch(() => flag.value, (newVal, oldVal) => {
  if (newVal) {
    isShowTab.value = true
  }
})

watch(() => props.audioArray, (newVal, oldVal) => {
    ctx_top.value =  topCanvas.value.getContext('2d')
    topCanvas.value.width = top.value.offsetWidth
    topCanvas.value.height = top.value.offsetHeight - 3
    draw(newVal)
})

const audio = ref(null)
const topCanvas = ref(null)
const bottomCanvas = ref(null)
const ctx_top = ref(null)
const ctx_bottom = ref(null)

const top = ref(null)
const bottom = ref(null)

const analyser = ref(null)
const dataArray = ref(null)

onMounted(() => {
  // ctx_top.value =  topCanvas.value.getContext('2d')
  // topCanvas.value.width = top.value.offsetWidth
  // topCanvas.value.height = top.value.offsetHeight - 3

  // ctx_bottom.value =  bottomCanvas.value.getContext('2d')
  // bottomCanvas.value.width = bottom.value.offsetWidth
  // bottomCanvas.value.height = bottom.value.offsetHeight

  // audio.value.onplay = () => {
  //   const audioContext = new AudioContext() //创建音频上下文
  //   const source = audioContext.createMediaElementSource(audio.value) //创建音频源节点
  //   analyser.value = audioContext.createAnalyser()
  //   analyser.value.fftSize = 512
  //   dataArray.value = new Uint8Array(analyser.value.frequencyBinCount)
  //   source.connect(analyser.value)
  //   analyser.value.connect(audioContext.destination)
  // }

  // draw()
})

const draw = (array) => {
    // requestAnimationFrame(draw)
    // nextTick(() => dataArray.value = props.audioArray)
    dataArray.value = array

    const topCanvas_width = topCanvas.value.width
    const topCanvas_height = topCanvas.value.height

    ctx_top.value.clearRect(0, 0, topCanvas_width, topCanvas_height)

    let len = dataArray.value.length / 150
    const barWidth = topCanvas_width / len

    ctx_top.value.fillStyle = '#FFC061'

    for( let i = 0; i < len; i++ ) {
        const data = dataArray.value[i]
        const barHeight = data / 255 * topCanvas_height
        const x1 = i * barWidth + topCanvas_width / 20
        const y = topCanvas_height - barHeight

        const x2 = topCanvas_width / 2 - ( i + 1 ) * barWidth

        ctx_top.value.fillRect( x1, y, barWidth - 2, barHeight )
        ctx_top.value.fillRect( x2, y, barWidth - 2, barHeight )
    }

    // const bottomCanvas_width = bottomCanvas.value.width
    // const bottomCanvas_height = bottomCanvas.value.height

    // ctx_bottom.value.clearRect(0, 0, bottomCanvas_width, bottomCanvas_height)

    // let len1 = dataArray.value.length / 2.5
    // const barWidth1 = bottomCanvas_width / len1 / 2

    // ctx_bottom.value.fillStyle = '#75AAFF'

    // for( let i = 0; i < len1; i++ ) {
    //     const data = dataArray.value[i]
    //     const barHeight1 = data / 255 * bottomCanvas_height
    //     const x1 = i * barWidth1 + bottomCanvas_width / 2
    //     const y = bottomCanvas_height - barHeight1

    //     const x2 = bottomCanvas_width / 2 - ( i + 1 ) * barWidth1

    //     ctx_bottom.value.fillRect( x1, y, barWidth1 - 2, barHeight1 )
    //     ctx_bottom.value.fillRect( x2, y, barWidth1 - 2, barHeight1 )
    // }
}
const line = ref(null)
const animate = ref(null)
const isPlay = ref(false)

const play = (value, time) => {
  if(value) {
    if(isPlay.value) {
      animate.value.play()
    } else {
      const arr = [
        {transform: 'translateX(0px)'},
        {transform: 'translateX(' + top.value.offsetWidth + 'px)'}
      ]
      let obj = {
        duration: time.total,
        easing: 'linear'
      }
      animate.value = line.value.animate(arr, obj)
    }
    isPlay.value = false
  } else {
      animate.value.pause()
      isPlay.value = true
  }
}

const end = () => {
  animate.value.cancel()
  animate.value =  null
}

const forward = (time) => {
  if(time.current * 1000 >= time.total) {
    animate.value.finish()
    animate.value =  null
    return
  }
  animate.value.cancel()
  animate.value =  null
  const rate = top.value.offsetWidth / (time.total / 1000)
  const position = 10 * rate + ((time.current - 10) * rate)
  const arr = [
    {transform: 'translateX(' + position +'px)'},
    {transform: 'translateX(' + top.value.offsetWidth + 'px)'}
  ]
  let obj = {
    duration: time.total - (Math.ceil(time.current) * 1000),
    easing: 'linear'
  }
  animate.value = line.value.animate(arr, obj)
}

const back = (time) => {
  animate.value.cancel()
  animate.value =  null
  const rate = top.value.offsetWidth / (time.total / 1000)
  const position =  ((time.current + 10) * rate) - (10 * rate)
  const arr = [
    {transform: 'translateX(' + position +'px)'},
    {transform: 'translateX(' + top.value.offsetWidth + 'px)'}
  ]
  let obj = {
    duration: time.total - (Math.ceil(time.current) * 1000),
    easing: 'linear'
  }
  animate.value = line.value.animate(arr, obj)
}

const setRate = (time, value) => {
  animate.value.cancel()
  animate.value =  null
  const rate = top.value.offsetWidth / (time.total / 1000)
  const position = time.current * rate
  const arr = [
    {transform: 'translateX(' + position +'px)'},
    {transform: 'translateX(' + top.value.offsetWidth + 'px)'}
  ]
  let obj = {
    duration: (time.total - (Math.ceil(time.current) * 1000)) / value,
    easing: 'linear'
  }
  animate.value = line.value.animate(arr, obj)
}

// 单条对话播放或者暂停
const playDuration = (flag, time) => {
  if(flag) {
    const rate = top.value.offsetWidth / (time.total / 1000)
    const position =  ((time.current) * rate)
    const arr = [
      {transform: 'translateX(' + position +'px)'},
      {transform: 'translateX(' + top.value.offsetWidth + 'px)'}
    ]
    let obj = {
      duration: time.total - (Math.ceil(time.current) * 1000),
      easing: 'linear'
    }
    animate.value = line.value.animate(arr, obj)
    animate.value.play()
    isPlay.value = false
  } else {
    animate.value.pause()
    isPlay.value = true
  }
}

// 重置设置进度数据
const resetAudioData = (time) => {
  console.log('reset', time)
  const rate = top.value.offsetWidth / (time.total / 1000)
  const position =  ((time.current) * rate)
  const arr = [
    {transform: 'translateX(' + position +'px)'},
    {transform: 'translateX(' + top.value.offsetWidth + 'px)'}
  ]
  let obj = {
    duration: time.total - (Math.ceil(time.current) * 1000),
    easing: 'linear'
  }
  animate.value = line.value.animate(arr, obj)
  animate.value.pause()
  isPlay.value = true
}


watch(() => audio.value, (newVal, oldVal) => {
  console.log('currentSecond', newVal)
}, { immediate: true })
</script>

<style lang="scss" scoped>
.topBox {
  background-color: rgba(255, 255, 255, 1) !important;
  height: 140px;
  border-radius: 4px;
  .title {
    padding: 18px 19px 17px 19px;
    display: flex;
    .leftTitle {
      flex: 1;
      font-size: 16px;
      font-weight: 600;
      color: rgba(51, 51, 51, 1);
    }
    .rightDot {
      margin-left: auto;
      display: flex;
      align-items: center;
      .dotOne {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background-color: rgba(255, 192, 97, 1);
        margin-right: 3px;
      }
      .dotTwo {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 10px;
        background-color: rgba(117, 170, 255, 1);
        margin-right: 3px;
        margin-left: 8px;
      }
      .text {
        display: inline-block;
        font-size: 12px;
        font-weight: 500;
        color: rgba(92, 91, 91, 1);
      }
    }
  }

  .line{
    width: 1px;
    height: 45px;
    background-color: #333;

    float: left;
    position: relative;
    top: 0;
    left: 21px;

    // animation: move 10s linear;
  }

  .top{
    // height: 21px; //双轨道的高度
    height: 45px;
    margin: 0 21px;
    border-radius: 8px;
    background-color: #FFF6E6;
  }

  .bottom{
    height: 21px;
    margin: 3px 21px 0;
    background-color: #F5F8FF;
  }
}

@keyframes move {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(1500px);
  }
}
</style>
